<template>
	<view class="preview">
		<swiper circular>
			<swiper-item v-for="(item, index) in 9" :key="index">
				<image src="../../common/images/preview1.jpg" mode="aspectFill" />
			</swiper-item>
		</swiper>
		<view class="mask">
			<view class="goBack"></view>
			<view class="count">3 / 9</view>
			<view class="time">15:30</view>
			<view class="date">06月15号</view>
			<view class="footer">
				<view class="box">
					<uni-icons type="info" size="28" />
					<view class="text">信息</view>
				</view>
				<view class="box">
					<uni-icons type="star" size="28" />
					<view class="text">5分</view>
				</view>
				<view class="box">
					<uni-icons type="download" size="28" />
					<view class="text">下载</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.preview {
	width: 100%;
	height: 100vh;
	position: relative;

	swiper {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.mask {

		&>view {
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			color: #fff;
			width: fit-content;
		}

		.goBack {}

		.count {
			top: 10vh;
			background: rgba(0, 0, 0, 0.3);
			font-size: 28rpx;
			border-radius: 40rpx;
			padding: 8rpx 28rpx;
			backdrop-filter: blur(10rpx);
		}

		.time {
			top: calc(10vh + 80rpx);
			font-size: 140rpx;
			font-weight: 100;
			line-height: 1em;
			text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
		}

		.date {
			top: calc(10vh + 230rpx);
			font-size: 34rpx;
			text-shadow: 0 2rpx rgba(0, 0, 0, 0.3);
		}

		.footer {}
	}
}
</style>
